<template>
	<view class="order-box">
		<hs-status-bar type="capsule"></hs-status-bar>
		<top-bar :title="'提交订单'" :haveBack="true"></top-bar>
		<scroll-view scroll-y="true" class="order-content" v-if="!checkouting">
			<!-- <navigator> -->
				<view class="address" @click="chooseAdress">
					<view class="t1">
						选择地址:
					</view>
					<view class="t2">
						{{adressInfo.addressLine || (addressList.length>0?'选择收货地址':'新增收货地址')}}
					</view>
					<view class="t3">
						{{ `${adressInfo.receiverName||''}   ${adressInfo.receiverPhone||''}`}}
					</view>
					<image class="edit" src="@/static/images/icon/vector.png" mode="aspectFit"></image>
				</view>
			<!-- </navigator> -->

			<view class="order">
				<view class="title">
					casestry
				</view>
				<view class="order-item" v-for="item of orderInfo.productList" :key="item.id">
					<image class="pic" :src="item.imageUrl" mode="aspectFit" @click="previewImage(item.imageUrl)"></image>
					<view class="left-text">
						<view class="name">
							<text>{{item.name}}</text>
							<text class="right">
								￥{{item.displayTotalPrice}}
							</text>
						</view>
						<view class="model">
							苹果iphone16 pro max
							<text class="right">
								×{{item.quantity}}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="other">
				<view class="other-item">
					<text>商品总价</text>
					<text>￥ {{orderInfo.displayPhoneCaseAmount}}</text>
				</view>
				<view class="other-item">
					<text>邮费</text>
					<!-- <text>{{adressInfo.id?'￥ '+orderInfo.displayShippingFee:'填写地址后获取'}}</text> -->
					<text>免邮费</text>
				</view>
				<!-- <view class="amount">
					<text>优惠</text>
					<text>{{orderInfo.phoneCaseAmount}}</text>
				</view> -->
			</view>

		</scroll-view>

		<view class="to-pay" v-if="!checkouting">
			<view class="amount">
				{{ adressInfo.id?'￥'+orderInfo.displayTotalAmount:'填写地址后获取'}}
			</view>
			<view class="pay" @click="toPay" :class="{disable:!adressInfo.id || orderData.length == 0}">
				去支付
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		checkout,
		createOrder
	} from '@/api/product.js'
	import {
		paymentToOrder
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				orderInfo: {},
				adressInfo: {},
				orderData: [],
				checkouting: true,
			}
		},
		computed: {
			...mapGetters(['trolleyList', 'defaultAddress', 'addressList'])
		},
		methods: {
			...mapActions(['getAddressList']),
			// 选择地址
			chooseAdress() {
				if (this.addressList.length == 0) {
					uni.navigateTo({
						url: '/pages/order/adressEdit'
					})
				} else {
					uni.navigateTo({
						url: '/pages/order/adress',
					})
				}
			},
			// 请求并加载订单信息
			getCheckoutInfo() {
				uni.showLoading()
				uni.$u.debounce(() => {
					let postData = {
						addressId: this.adressInfo.id,
						customProductList: this.orderData
					}
					checkout(postData).then(res => {
						this.orderInfo = res.data
						this.checkouting = false
						uni.hideLoading()
					})
				}, 500)

			},
			// 提交订单 关闭订单页跳转去支付页面（提交订单之后离开不会再回到这个页面
			toPay() {
				if (!this.adressInfo.id || this.orderData.length == 0) return
				
				let postData = {
					addressId: this.adressInfo.id,
					customProductList: this.orderData
				}
				createOrder(postData).then(res => {
					paymentToOrder(res.data.orderId)
					// uni.redirectTo({
					// 	url: `/pages/order/pay?amount=${res.data.totalAmount}&orderId=${res.data.orderId}&time=${res.data.remainingPaymentTime}`,
					// })
				})

			},
			// 放大图片预览
			previewImage(imageUrl) {
				let arr = [imageUrl]
				uni.previewImage({
					current: 0,
					urls: arr
				});
			},
		},
		onShow() {
			let orderAdress = uni.getStorageSync('orderAdress')
			if (orderAdress.id) {
				this.adressInfo = uni.getStorageSync('orderAdress')
			} else {
				this.adressInfo = {}
			}
			this.getCheckoutInfo()
		},
		onHide() {},
		onLoad() {
			this.orderData = uni.getStorageSync('orderData')
			this.getAddressList().then(() => {
				if (this.addressList.length == 0) {
					console.log('/pages/order/adressEdit?intoType=2');
					uni.navigateTo({
						url: '/pages/order/adressEdit?intoType=2'
					})
				} else if (this.addressList.length > 0) {
					this.adressInfo = this.defaultAddress.id ? this.defaultAddress : this.addressList[0],
						uni.setStorageSync('orderAdress', this.adressInfo)
				}
				this.getCheckoutInfo()
			})
		},
		onUnload() {
			uni.removeStorageSync('orderAdress')
			uni.removeStorageSync('orderData')
		}
	}
</script>

<style lang="scss">
	.order-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 100%;

		.order-content {
			padding: 15rpx 19rpx;
			box-sizing: border-box;
			flex-grow: 1;
			overflow: hidden;

			.address,
			.order,
			.other {
				width: 100%;
				background: #fff;
				border-radius: 26rpx;
				margin-bottom: 28rpx;
			}

			.address {
				height: 196rpx;
				padding: 35rpx 18rpx 26rpx;
				font-weight: 600;
				color: #3D3D3D;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.t1 {
					font-size: 26rpx;
				}

				.t2 {
					width: calc(100% - 53rpx);
					font-size: 35rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.t3 {
					font-size: $uni-font-size-sm;
					color: #979797;
					font-weight: 500;
				}

				.edit {
					width: 14rpx;
					height: 26rpx;
					position: absolute;
					top: 103rpx;
					right: 24rpx;
				}
			}

			.order {
				padding: 26rpx 17.5rpx;
				display: flex;
				flex-direction: column;

				.title {
					margin: 0 0 26rpx 22.7rpx;
					font-size: 26rpx;
					font-weight: bold;
				}

				.order-item {
					height: 200rpx;
					overflow: hidden;
					display: flex;
					border-bottom: 1rpx solid #D8D8D8;
					margin-bottom: 52.6rpx;
					font-weight: 600;
					padding-bottom: 48rpx;
					justify-content: space-between;

					&:last-child {
						border-bottom: none;
					}

					.pic {
						height: 200rpx;
						width: 200rpx;
						margin-left: 22.7rpx;
						flex-shrink: 0;
					}

					.left-text {
						margin-left: 30rpx;
						display: flex;
						flex-grow: 1;
						flex-direction: column;
						justify-content: space-evenly;

						.name {
							font-size: 24.5rpx;
							color: #3D3D3D;
							display: flex;
							justify-content: space-between;
							align-items: baseline;

							.right {
								float: right;
								text-align: right;
								font-size: 38.55rpx;
								margin-right: 12.3rpx;
								width: 127rpx;
								overflow: hidden;
							}
						}

						.model {
							font-size: 21.03rpx;
							color: #979797;

							.right {
								float: right;
								text-align: right;
								font-size: 28rpx;
								margin-right: 12.3rpx;
								color: #3D3D3D;
								font-weight: normal;
							}
						}
					}
				}
			}

			.other {
				padding: 35rpx 18rpx 26rpx;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 2;

				.other-item {
					display: flex;
					justify-content: space-between;
				}
			}
		}

		.to-pay {
			width: calc(100% - 30rpx);
			height: 104rpx;
			background-color: #D8D8D8;
			border-radius: 52rpx;
			display: flex;
			padding: 12rpx 10rpx 10rpx 30rpx;
			justify-content: space-between;
			margin-left: 15rpx;
			margin-bottom: 17rpx;

			.amount {
				font-size: 35.05rpx;
				line-height: 80rpx;
				color: #333333;
				font-weight: 700;
			}

			.pay {
				width: 245rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background: #333333;
				font-size: 35.05rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
				&.disable{
					opacity: .4;
				}
			}
		}
	}
</style>